<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">新增围栏</span>
    <el-button type="primary" style="float:right;margin-top:13px;" @click="router.push('/geofence')">返回</el-button>
  </div>
<!--  创建地图容器组件-->
  <div id="mapContainer" style="width:100%;height:84vh"></div>

<!--  新增围栏弹窗用来接收电子围栏名称 在绘制完围栏点击对勾时出现 -->
  <el-dialog title="围栏信息" v-model="dialogVisible" :before-close="closeDialog">
    <el-form label-width="80px">
      <el-form-item label="围栏名称">
        <el-input v-model="geofence.name" placeholder="请输入围栏名称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="saveGeofence">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import router from "@/router";
  import {nextTick, onMounted, ref} from "vue";
  import { DrawScene, DrawControl, OperateEventType } from 'bmap-draw';
  import {ElMessage} from "element-plus";
  import axios from "axios";
  import qs from "qs";

  //定义电子围栏对象用于给后端新增围栏时使用
  const geofence = ref({
    name:'', //围栏名称
    position:{} //围栏位置信息(注意:位置信息是一个对象)
  });
  //定义控制新增围栏弹窗
  const dialogVisible = ref(false);
  //定义全局变量用于保存地图对象
  var map;
  // 一进到页面立即执行
  onMounted(()=>{
    // 表示在DOM更新完毕后再执行，因为需要保证上方的地图容器div创建后再在div中渲染地图
    nextTick(()=>{
      //7.创建地图实例 注意：不要导入！注意：不要导入！注意：不要导入！
      map = new BMapGL.Map("mapContainer");
      //8.设置地图的中心点坐标的经纬度创建地图实例 (166.4074,39.9024)天安门的经纬度 注意：不要导入！
      let point = new BMapGL.Point(116.4074,39.9024);
      //9.给上面创建好的地图对象设置中心点和缩放级别 注意：不要导入！
      map.centerAndZoom(point,15);
      //10.为地图添加鼠标绘制控件
      //10.1创建绘制场景类，本类为所有鼠标绘制控件的基类，必须先创建DrawScene类实例 注意：需要导入！
      const scene = new DrawScene(map);
      //10.2创建绘制控件类添加到当前绘制场景类，注意：需要导入！
      const drawContrl = new DrawControl(scene, {
        //10.3不显示对应绘制控件项的文字提示
        enableTips: false, //小提示关
        //10.3锚点：设置当前绘制控件的位置
        anchor: BMAP_ANCHOR_TOP_RIGHT, //右上角
        //10.3设置绘制控件显示哪些绘制项 circle圆形 rectangle矩形
        drawingItems: [
          //'marker',  标记
          'circle',
          'rectangle'
        ]
      });
      //10.5监听绘制完成事件(OperateEventType.COMPLETE 百度地图定义的)，用户点击对勾时返回触发此事件的对象
      scene.addEventListener(OperateEventType.COMPLETE,(event)=>{
        //一旦围栏绘制完毕，点击对勾就立即出现输入围栏名称的弹窗
        dialogVisible.value = true;
        //控制台打印触发这个事件的目标(target)对象，在这里就是圆形或矩形围栏对象
        //console.log(event.target);
        //10.6获取触发事件对象中的overlay(围栏覆盖物)值
        let overlay = event.target.overlay;
        //10.7判断当前绘制的图形是圆形还是矩形 instanceof用于判断左侧overlay对象是否为右侧的BMapGL.Circle类的对象
        if(overlay instanceof BMapGL.Circle){ //是圆形围栏
          //设置围栏的类型为圆形
          geofence.value.position.type = 'circle';
          //设置围栏的半径值
          geofence.value.position.radius = overlay.getRadius();
          //设置围栏的经纬度
          geofence.value.position.longitude = overlay.getCenter().lng; //经度
          geofence.value.position.latitude = overlay.getCenter().lat; //纬度
          console.log(geofence.value);
        }else{ //是矩形围栏
          //定义一个用来保存矩形四个顶点经纬度的数组
          let recPoints = [];
          //依次遍历覆盖物顶点数组，取出来每个顶点的经纬度，使用 - 拼接并存入上方的空数组中
          for(let i = 0;i<4;i++){
            recPoints.push(overlay.points[i].latLng.lng+'-'+overlay.points[i].latLng.lat);
          }
          //设置围栏的类型为矩形
          geofence.value.position.type = 'rectangle';
          //设置当前围栏的顶点坐标字符串
          geofence.value.position.recPoints = recPoints.join(',');
        }
      })
      //10.4将绘制控件添加到地图上
      map.addControl(drawContrl);
    })
  })
  //定义新增围栏的方法
  const saveGeofence = ()=>{
    //需要进行非空校验
    if(!geofence.value.name||geofence.value.name.trim()==null){
      ElMessage.error("围栏名称不能为空");
      return;
    }else{
      //因为geofence中的position也是一个JS对象，所以需要先将position转为JSON字符串
      geofence.value.position = JSON.stringify(geofence.value.position);
      //再将geofence对象转为qs查询字符串，才能给后端发请求
      let data = qs.stringify(geofence.value);
      axios.post(BASE_URL+"/v1/geofence/save",data)
           .then((response)=>{
             if(response.data.code == 2000){
               ElMessage.success("新增围栏成功");
               dialogVisible.value = false;
               router.push('/geofence');
             }
           })
    }

  };
  //定义处理弹窗关闭的方法
  const closeDialog = ()=>{
    if(confirm("您确认取消吗?")){
      //清空输入框中的围栏名称与收集到的围栏数据
      geofence.value = {name:'',position:{}};
      //关闭弹窗
      dialogVisible.value = false;
      //清空地图上位置的围栏覆盖物，取消了在地图上就不应再有之前划的围栏覆盖物
      map.clearOverlays();
    }
  }
</script>

<style scoped>

</style>